<template>
  <div class="m-4 mr-0 bg-white">
    <AMenu mode="inline" v-model:selected-keys="keys">
      <a-menu-item v-for="group in groups" :key="group" @click="handleclick(group)">
        {{ group }}
      </a-menu-item>
    </AMenu>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { Menu as AMenu } from 'ant-design-vue'
import GroupTabsActionType from "./typing";


const props = defineProps<{
  value: string,
  api: () => Promise<string[]>
}>()
const emit = defineEmits(['register', 'select', 'update:value'])
const groups = ref<string[]>([])
const keys = ref<string[]>([])

onMounted(async () => {
  await init()
});

watch(() => keys.value, (val) => {
  emit('update:value', val[0])
});

const init = async () => {
  groups.value = await props.api()
}

const handleclick = (id: string) => {
  emit('update:value', id)
  emit('select', id)
}

const instance: GroupTabsActionType = {
  reload: async () => {
    await init()
  }
}
defineExpose(instance) 
</script>